<template>
    <div>
        <dtable 
          :columns="columns"  
          :dataAll="dataAll" 
          :dataShow="dataShow" 
          :totals="totals" 
          :loading="loading"   
          @refresh="getall(pagedata)"  
          @changePage="changePage" 
          @search="search">
        </dtable>
    </div>
</template>

<script>
import dtable from "../../components/table/btable.vue"; //采用biztable
export default {
  components: {
    dtable
  },
  name: "implements",
  data() {
    return {
      dataAll: [],
      totals: 0,
      current: 0,
      pageSize: 15,
      dataShow: false,
      loading: false,
      pagedata: {
        pagesize: 10,
        page: 1,
        searchKey: "",
        sortby: ["Ctime"],
        order: ["desc"]
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: "排序"
        },
        {
          title: "名称",
          key: "Name"
        },
        {
          title: "客户",
          key: "CustName"
        },
        {
          title: "订单",
          key: "OrderName"
        },
        {
          title: "预计安装",
          key: "Plan",
          width: 90,
          render: (h, params) => {
            return h("span", {}, params.row.Plan + " 例");
          }
        },
        {
          title: "已安装",
          key: "Really",
          render: (h, params) => {
            return h("span", {}, params.row.Really + " 例");
          }
        },
        {
          title: "实施状态",
          key: "InstallType",
          render: (h, params) => {
            let str = null;
            let color = null;
            switch (params.row.InstallType) {
              case 0:
                color = "red";
                str = "未开始";
                break;
              case 1:
                color = "orange";
                str = "部分安装";
                break;
              case 2:
                color = "green";
                str = "全部安装";
                break;
              default:
                color = "default";
                str = "其它";
                break;
            }
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              str
            );
          }
        },
        {
          title: "操作",
          width: 200,
          render: (h, params) => {
            let str = "详情";
            let color = "info";
            let onclick = null;
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.gotoContent(params.row.Id);
                  }
                }
              },
              "详情"
            );
          }
        }
      ]
    };
  },
  methods: {
    gotoContent(id) {
      this.$router.push({
        name: "实施记录详情",
        params: {
          implementId: id
        }
      });
    },
    search() {},
    refresh() {
      this.getAll(this.pagedata);
    },
    getAll(pagedata) {
      this.$api
        .getImplements()
        .then(res => {
          if (res.code == 0) {
            this.dataAll = res.Data;
          }
        })
        .catch(err => {});
    },
    changePage(pagedata) {
      this.spinShow = true;
      this.getAll(pagedata);
      setTimeout(() => {
        this.spinShow = false;
      }, 500);
    }
  },
  mounted() {
    this.getAll(this.pagedata);
  }
};
</script>

<style scoped>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>